<template>
  <div id="app">
    <el-tabs v-model="activeName">
      <el-tab-pane label="工程设计变更申请单" name="first">
        <el-form ref="statics" :model="statics" label-width="80px" :rules="addStatics">
          <h1>工程设计变更申请单</h1>
          <el-form-item label="施工单位" class="head">
            <el-input v-model="statics.construction" disabled></el-input>
          </el-form-item>
          <el-form-item label="编号" class="head">
            <el-input v-model="statics.number" disabled></el-input>
          </el-form-item>
          <el-form-item label="工程名称">
            <el-input v-model="statics.name" style="width:680px" disabled></el-input>
          </el-form-item>
          <el-form-item label="变更部位">
            <el-input type="textarea" v-model="statics.change_parts" style="width:680px" disabled></el-input>
          </el-form-item>
          <el-form-item label="变更内容">
            <el-input type="textarea" v-model="statics.change_content" style="width:680px" disabled></el-input>
          </el-form-item>
          <el-form-item label="申请方">
            <el-select v-model="statics.apply" placeholder="请选择您的身份" style="width:300px" disabled>
              <el-option label="设计方" value="designer"></el-option>
              <el-option label="施工方" value="builder"></el-option>
              <el-option label="监理" value="watcher"></el-option>
              <el-option label="业主" value="boss"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="申请日期">
            <el-col :span="8">
              <el-date-picker type="date" placeholder="选择日期" v-model="statics.date1" disabled style="width: 100%;"></el-date-picker> 
            </el-col> 
            <el-col class="line" :span="1" :offset="1">-</el-col>
            <el-col :span="8">
              <el-time-picker placeholder="选择时间" v-model="statics.date2" disabled style="width: 100%;"></el-time-picker>
            </el-col>
          </el-form-item>
          <el-form-item label="监理意见" prop="watcher_suggestions">
            <el-input type="textarea" v-model="statics.watcher_suggestions" disabled style="width:680px"></el-input>
          </el-form-item>
          <el-form-item label="监理姓名" prop="watcher_name">
            <el-input v-model="statics.watcher_name" style="width:300px" disabled></el-input>
          </el-form-item>
          <el-form-item label="业主意见" prop="boss_suggestions">
            <el-input type="textarea" v-model="statics.boss_suggestions" style="width:680px"></el-input>
          </el-form-item>
          <el-form-item label="业主姓名" prop="boss_name">
            <el-input v-model="statics.boss_name" style="width:300px"></el-input>
          </el-form-item>
          <el-form-item>
            <el-upload
              class="upload-demo"
              action="https://jsonplaceholder.typicode.com/posts/"
              :on-error = "uploadsuccess"
              :file-list="fileList"
              list-type="picture">
              <el-button size="small" type="primary">上传单位盖章</el-button>
              &nbsp;&nbsp;&nbsp;<span slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</span>
            </el-upload>
          </el-form-item>
          <!-- <el-form-item label="文件上传   :">
              <el-upload
                class="upload-demo"
                ref="upload"
                action="#"
                :limit="3"
                :http-request="uploadOk"
                :auto-upload="true">
                选取文件
              </el-upload>
          </el-form-item> -->
          <el-form-item>
            <el-button @click.native="exmain" style="width: 100px;" type="primary">提交</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="工程变更指令确认单" name="second">
        <el-form ref="form" :model="form" label-width="90px" :rules="addForm">
          <h1>工程变更指令确认单</h1>
          <el-form-item label="工程名称" class="head" prop="project_name">
            <el-input v-model="form.project_name" disabled></el-input>
          </el-form-item>
          <el-form-item label="合同编号" class="head" prop="project_number">
            <el-input v-model="form.project_number" disabled></el-input>
          </el-form-item>
          <el-form-item label="建设单位" class="head" prop="contractor_unit">
            <el-input v-model="form.contractor_unit" disabled></el-input>
          </el-form-item>
          <el-form-item label="施工单位" class="head" prop="builder_unit">
            <el-input v-model="form.builder_unit" disabled></el-input>
          </el-form-item>
          <el-form-item label="申请部门" prop="apply_unit">
            <el-input  v-model="form.apply_unit" style="width:300px" disabled></el-input>
          </el-form-item>
          <el-form-item label="签证日期" prop="date1">
            <el-date-picker type="date" placeholder="选择日期" disabled v-model="form.date1" style="width: 300px;"></el-date-picker> 
          </el-form-item>
          <el-form-item label="完成日期" prop="date2">
            <el-date-picker type="date" placeholder="选择日期" disabled v-model="form.date2" style="width: 300px;"></el-date-picker> 
          </el-form-item>
          <el-form-item label="完成变更内容说明" prop="finish_instruction">
            <el-input type="textarea" v-model="form.finish_instruction" disabled style="width:680px"></el-input>
          </el-form-item>
          <el-form-item label="负责人" prop="responsible">
            <el-input v-model="form.responsible" style="width:300px" disabled></el-input>
          </el-form-item>
          <el-form-item label="监理意见" prop="watcher_suggestions">
            <el-input type="textarea" v-model="form.watcher_suggestions" disabled style="width:680px"></el-input>
          </el-form-item>
          <el-form-item label="监理姓名" prop="watcher_name">
            <el-input v-model="form.watcher_name" style="width:300px" disabled></el-input>
          </el-form-item>
          <el-form-item label="业主意见" prop="boss_suggestions">
            <el-input type="textarea" v-model="form.boss_suggestions" style="width:680px"></el-input>
          </el-form-item>
          <el-form-item label="业主姓名" prop="boss_name">
            <el-input v-model="form.boss_name" style="width:300px"></el-input>
          </el-form-item>
          <el-form-item>
            <el-upload
              class="upload-demo"
              action="https://jsonplaceholder.typicode.com/posts/"
              :on-error = "uploadsuccess"
              :file-list="fileList"
              list-type="picture">
              <el-button size="small" type="primary">上传单位盖章</el-button>
              &nbsp;&nbsp;&nbsp;<span slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</span>
            </el-upload>
          </el-form-item>
          <el-form-item>
            <el-button @click.native="submit" style="width: 100px;" type="primary">提交</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="工程变更签证结算书说明" name="third">
        <el-form ref="data" :model="data" label-width="90px" :rules="addData">
          <h1>工程变更签证结算书说明</h1>
          <el-form-item label="编号" class="head" prop="project_id">
            <el-input v-model="data.project_id" disabled></el-input>
          </el-form-item>
          <el-form-item label="工程名称" class="head" prop="project_name">
            <el-input v-model="data.project_name" disabled></el-input>
          </el-form-item>
          <el-form-item label="变更价值" class="head" prop="change_value">
            <el-input v-model="data.change_value" disabled></el-input>
          </el-form-item>
          <el-form-item label="监理单位" class="head" prop="watcher_unit">
            <el-input v-model="data.watcher_unit" disabled></el-input>
          </el-form-item>
          <el-form-item label="变更签证结果" prop="application_result">
            <el-input type="textarea" v-model="data.application_result" style="width:680px" disabled></el-input>
          </el-form-item> 
          <el-form-item label="主管领导姓名" class="head" prop="manager">
            <el-input v-model="data.manager" disabled></el-input>
          </el-form-item>
          <el-form-item label="专工姓名" class="head" prop="special">
            <el-input v-model="data.special" disabled></el-input>
          </el-form-item>
          <el-form-item label="编制日期" prop="date">
            <el-date-picker type="date" placeholder="选择日期" disabled v-model="data.date" style="width: 300px;"></el-date-picker> 
          </el-form-item>
          <el-form-item label="监理意见" prop="watcher_suggestions">
            <el-input type="textarea" v-model="data.watcher_suggestions" disabled style="width:680px"></el-input>
          </el-form-item>
          <el-form-item label="监理姓名" prop="watcher_name">
            <el-input v-model="data.watcher_name" style="width:300px" disabled></el-input>
          </el-form-item>
          <el-form-item label="业主意见" prop="boss_suggestions">
            <el-input type="textarea" v-model="data.boss_suggestions" style="width:680px"></el-input>
          </el-form-item>
          <el-form-item label="业主姓名" prop="boss_name">
              <el-input v-model="data.boss_name" style="width:300px"></el-input>
          </el-form-item>
          <el-form-item>
            <el-upload
              class="upload-demo"
              action="https://jsonplaceholder.typicode.com/posts/"
              :file-list="fileList"
              :on-error = "uploadsuccess"
              list-type="picture">
              <el-button size="small" type="primary">上传单位盖章</el-button>
              &nbsp;&nbsp;&nbsp;<span slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</span>
            </el-upload>
          </el-form-item>
          <el-form-item>
            <el-button @click.native="add" style="width: 100px;" type="primary">提交</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data(){
    return {
      activeName: 'first',
      statics:{
        construction: '',
        number: '',
        name: '',
        change_parts: '',
        change_content: '',
        apply: '',
        date1: '',
        date2: '',
        status:0,
        watcher_suggestions: '',
        watcher_name: '',
        boss_suggestions: '',
        boss_name: '',
      },
      addStatics: {
        boss_suggestions: [{ required: true, message: '业主意见不能为空!', trigger: 'blur' },],
        boss_name: [{ required: true, message: '业主姓名不能为空!', trigger: 'blur' },],
      },
      form: {
          project_name: '',
          project_number: '',
          contractor_unit: '',
          builder_unit: '',
          apply_unit: '',
          date1: '',
          date2: '',
          finish_instruction: '',
          responsible: '',
          watcher_suggestions: '',
          watcher_name: '',
          boss_suggestions: '',
          boss_name: '',
          status:0
      },
      addForm:{
        boss_suggestions: [{ required: true, message: '业主意见不能为空!', trigger: 'blur' },],
        boss_name: [{ required: true, message: '业主姓名不能为空!', trigger: 'blur' },],
      },
      data: {
        project_id:'',
        project_name: '',
        change_value: '',
        watcher_unit: '',
        application_result: '',
        manager: '',
        special: '',
        date: '',
        watcher_suggestions:'',
        watcher_name:'',
        boss_suggestions: '',
        boss_name: '',
        status:0
      },
      addData:{
        boss_suggestions: [{ required: true, message: '业主意见不能为空!', trigger: 'blur' },],
        boss_name: [{ required: true, message: '业主姓名不能为空!', trigger: 'blur' },],
      },
      fileList:[]
    }
  },
  methods:{
    getInfomation(){
      var obj1 = JSON.parse(sessionStorage.getItem("application"));
      var obj2 = JSON.parse(sessionStorage.getItem("instruction"));
      var obj3 = JSON.parse(sessionStorage.getItem("change"));
      if(obj1.status == 1){
        this.statics = JSON.parse(sessionStorage.getItem("application"));
      }
      if(obj2.status == 1){
        this.form = JSON.parse(sessionStorage.getItem("instruction"));
      }
      if(obj3.status == 1){
          this.data = JSON.parse(sessionStorage.getItem("change"));
        }
    },
    exmain(){
      if(this.statics.status == 1){
        this.statics.status = 2;
        sessionStorage.setItem("application", JSON.stringify(this.statics));
        this.$message({
            message: '审批成功',
            type: 'success',
            center: true
        });
      }
    },
    submit(){
      if(this.form.status == 1){
        this.form.status = 2;
        sessionStorage.setItem("application", JSON.stringify(this.form));
        this.$message({
            message: '审批成功',
            type: 'success',
            center: true
        });
      }
    },
    add(){
        if(this.data.status == 1){
          this.data.status = 2;
          sessionStorage.setItem("change", JSON.stringify(this.data));
          this.$message({
              message: '审批成功',
              type: 'success',
              center: true
          });
        }
      },
    // 虚伪的成功调用
    uploadsuccess(){
      console.log("success");
      this.$message({
        message: '上传成功',
        type: 'success',
        center: true
      });
    }
  },
  mounted(){
    this.getInfomation();
  }
}
</script>

<style lang="less" scoped>
#app{
  height: auto;
}
.el-form {
  width: 800px;
  height: auto;
  margin: 0 auto;
  border: 1px dashed rgba(0, 50, 100, 0.8);
  position: relative;
  h1{
    text-align: center;
  }
  .head{
    .el-input {
      width: 300px;
    }
    display: inline-block;
  }
}
.el-upload--text{
  width: 419px;
  height: 36px;
}
</style>